<!DOCTYPE html>  
<html>  
<head>  
    <title>Translate Pdf File</title>  
</head>  
<body>  
    <h2>Translate Pdf File</h2>  
    <form   method="post" id="myForm" enctype="multipart/form-data">  
        Translate File:  <input type="file" name="file" id="fileInput" >  <br/><br/>
        Target language:  <input type="text" name="target_language"> <br/> <br/>
        Save file format: <select name="file_format"  >
            <option value="markdown">markdown</option>
            <option value="pdf">pdf</option> 
          </select> <br/><br/>
          <input type="submit" value="Translate"> 
    </form>    <br/> <br/>
    Download Translated File:
    <div id="filelist"></div>
</body>  
</html>
<script type="text/javascript">
   document.getElementById('myForm').addEventListener('submit', function (e) {
             e.preventDefault(); 
             var xhr = new XMLHttpRequest(); 
             xhr.open('POST', '/translate');
             xhr.send(new FormData(this));
             xhr.onreadystatechange = function() {
                if ( xhr.readyState === 4  && xhr.response!="" ) {
                  if (   xhr.status == 200  ) { 
                      document.getElementById('filelist').innerHTML  = '<a href="/download?filename='+xhr.response +'" target="_blank">'+xhr.response +'</a><br/>' 
                         + document.getElementById('filelist').innerHTML 
                           
                  }else{ 
                      alert(xhr.response); 
                  }
                }
            };
         });
</script>